<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>学生查询</title>
		<link rel="stylesheet" type="text/css" href="../css/demo.css" />
	</head>
	<body>
		<div id="app">
			<fieldset>
				<legend>查询</legend>
				<div class="form-group">
					<label>姓名</label>
					<input type="text" v-model="searchParam.stuName" />
				</div>
				<div class="form-group">
					<label>学校</label>
					<select v-model="searchParam.schoolCode">
						<option value="">---</option>
						<option v-for="item in scllist" :value="item.id">{{item.schoolname}}</option>
					</select>
				</div>
				<div class="form-group">
					<label>性别</label>
					<select v-model="searchParam.sexCode">
						<option value="">---</option>
						<option v-for="item in sexlist" :value="item.id">{{item.name}}</option>
					</select>
				</div>
				<div class="form-group">
					<label></label>
					<button @click="search(1)">查询</button>
				</div>
			</fieldset>
			<button @click="batchDelete()">删除</button>
			<button @click="toadd()">增加</button>
			<span :class="showmsg.classobject">{{showmsg.msginfo}}</span>
			<table>
				<thead>
					<tr>
						<th><input type="checkbox" v-model="selectall" @change="mselectAll()" /></th>
						<th>序号</th>
						<th>学号</th>
						<th>姓名</th>
						<th>学校</th>
						<th>年龄</th>
						<th>生日</th>
						<th>性别</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item,index) in result.list">
						<td><input type="checkbox" v-model="bathselect" :value="item.id" /></td>
						<td>{{index + 1}}</td>
						<td>{{item.stucode}}</td>
						<td>{{item.stuname}}</td>
						<td>{{item.schoolname}}</td>
						<td>{{item.stuage}}</td>
						<td>{{item.stubrithday}}</td>
						<td>{{item.name}}</td>
						<td></td>
						<td>
							<button @click="toUpdate(item.id)">修改</button>
							<button @click="delete1(item.id)">删除</button>
						</td>
					</tr>
				</tbody>
			</table>
			<ul class="pagination" style="margin-top: 2px;">
				<li v-for="n in result.pages">
					<a href="javascript:void(0);" @click="search(n)" :class="{'active' : n==result.pageNum}">{{n}}</a>
				</li>
				<li>
					<select @change="search(1)" v-model="searchParam.onePageCount">
						<option v-for="item in pagecountlist" :value="item">{{item}}</option>
					</select>
				</li>
			</ul>
		</div>
		<script type="text/javascript" src="../js/axios.js"></script>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript" src="../js/message.js"></script>
		<script>
			var vue = new Vue({
				el: "#app",
				data: {
					"scllist": [],
					"sexlist": [],
					"result": {
						"list": {}
					},
					"searchParam": {
						"stuName": "",
						"schoolCode": "",
						"sexCode": "",
						"currentpage": 1,
						"onePageCount": 5
					},
					"pagecountlist": [5, 10, 20, 30, 50],
					"bathselect": [],
					"selectall": false,
					showmsg: {
						msginfo: "",
						classobject: {
							msg: false,
							success: false
						}
					}
				},
				methods: {
					search: function(currentpage) {
						this.showmsg.msginfo = "";
						this.searchParam.currentpage = currentpage;

						axios.post("http://localhost:8000/bracelet/api/bstudent/getstudentpagerlist", {
								"stuName": this.searchParam.stuName,
								"schId": this.searchParam.schoolCode,
								"sexCode": this.searchParam.sexCode,
								"pageNum": this.searchParam.currentpage,
								"pageSize": this.searchParam.onePageCount
							})
							.then(res => {
								this.result = res.data.result;
							})
							.catch(error => {
								location.href = "500.html";
							});
					},
					batchDelete: function() {
						if (this.bathselect.length == 0) {
							this.showmsg.classobject.msg = true;
							this.showmsg.classobject.success = false;
							this.showmsg.msginfo = "请选择记录后，再删除";
							return;
						}
						if (confirm("你确定是否要删除")) {
							var param = {
								"ids": this.bathselect
							};
							axios.post("http://localhost:8000/bracelet/api/bstudent/delete",
									param)
								.then(res => {
									if (res.data.result) {
										this.search(1);
										this.showmsg.classobject.msg = false;
										this.showmsg.classobject.success = true;
										this.showmsg.msginfo = message.A004;
									} else {
										this.showmsg.classobject.msg = true;
										this.showmsg.classobject.success = false;
										this.showmsg.msginfo = message.A005;
									}
								})
								.catch(error => {
									location.href = "../500.html";
								});

						}
					},
					delete1: function(id) {
						if (confirm("你确定是否要删除")) {
							var param = {
								"ids": [id]
							};
							axios.post("http://localhost:8000/bracelet/api/bstudent/delete",
									param)
								.then(res => {
									if (res.data.result) {
										this.search(1);
										this.showmsg.classobject.msg = false;
										this.showmsg.classobject.success = true;
										this.showmsg.msginfo = message.A004;
									} else {
										this.showmsg.classobject.msg = true;
										this.showmsg.classobject.success = false;
										this.showmsg.msginfo = message.A005;
									}
								})
								.catch(error => {
									location.href = "../500.html";
								});

						}
					},
					mselectAll: function() {
						if (this.selectall) {
							for (var i = 0; i < this.result.list.length; i++) {
								if (this.bathselect.indexOf(this.result.list[i].id) == -1) {
									// 判断没有重复再添加
									this.bathselect.push(this.result.list[i].id);
								}
							}
						} else {
							this.bathselect = [];
						}

					},
					toadd: function() {
						location.replace("studentadd.html");
					},
					toUpdate: function(id) {
						location.replace("studentupdate.html?id=" + id);
					},
					toUpload: function(id) {
						location.replace("studentupload.html?id=" + id);
					}
				},
				created: function() {
					axios.post("http://localhost:8000/bracelet/api/bcodename/getcodelist", {
							"codeId": "001"
						})
						.then(res => {
							this.sexlist = res.data.result;
						})
						.catch(error => {
							location.href = "../500.html";
						});

					axios.post("http://localhost:8000/bracelet/api/bschool/getallscllist")
						.then(res => {
							this.scllist = res.data.result;
						})
						.catch(error => {
							location.href = "../500.html";
						});

					// 数据初始化完成
					this.search(1);
				},
				mounted: function() {
					// 数据挂载DOM完成事件
				}
			});
		</script>
	</body>
</html>
